<template>
    <jb-crud-page ref="pageRef" searchUrl="/aiApp/list" :conditions-align="'start'" :searchConditions="pageConditions"
                  :editComponent="AppEdit">
        <template #conditions-form>
            <jb-input v-model:value="pageConditions.keywords" placeholder="请输入关键词搜索" ></jb-input>
            <n-select clearable placeholder="是否启用" style="width: 160px" v-model:value="pageConditions.enable"
                      :options="[{ label: '启用', value: true}, { label: '禁用', value: false}]"></n-select>
        </template>
        <template #opt>
            <jb-btn type="primary" secondary @click="pageRef.showEditModal('添加AI应用')">添加AI应用</jb-btn>
        </template>

        <template #default="{list,tableStartIndex}">
            <jb-super-table :data="list"
                            :start-index="tableStartIndex"
            >
                <jb-super-column type="seq" title="序号" width="60" fixed="left"></jb-super-column>
                <jb-super-column
                    field="sn"
                    title="编码"
                    min-width="100"
                ></jb-super-column>
                <jb-super-column
                    field="name"
                    title="名称"
                    min-width="160"
                    fixed="left"
                ></jb-super-column>
                <jb-super-column
                    field="appTypeName"
                    title="应用类型"
                    width="120"
                >
                    <template #default="{row}">
                        <n-tag :bordered="false" type="error" v-if="row.appType=='app_design'">
                            {{ row.appTypeName }}
                        </n-tag>
                        <n-tag :bordered="false" v-if="row.appType=='app_simple'">
                            {{ row.appTypeName }}
                        </n-tag>
                    </template>
                </jb-super-column>
                <jb-super-column
                    field="briefInfo"
                    title="定制优化"
                    width="100"
                >
                    <template #default="{row}">
                        <jb-btn v-if="row.appType === 'app_simple'"
                                icon="mdi:settings-stop-outline"
                                type="error" ghost
                                drawerTitle=""
                                :drawerComponent="AppTools"
                                :drawerComponentProps="{appId: row.id,sessionId:row.sessionId}"
                                drawerNegativeText=""
                                drawerPositiveText=""
                                :drawerArgs="{defaultWidth: '1360px',minWidth:1360,maskClosable:false}"
                                @drawerYesClick="handleDrawerYesClick"
                        ></jb-btn>

                        <jb-btn v-if="row.appType === 'app_design'"
                                icon="mdi:settings-stop-outline"
                                type="error" ghost @click="goChainPage(row)"
                        ></jb-btn>

                    </template>
                </jb-super-column>

                <jb-super-column
                    field="enable"
                    title="是否发布"
                    width="100"
                >
                    <template #default="{ row }">
                        <jb-switch v-model:value="row.enable" :url="`/aiApp/toggleEnable/${row.id}`"
                                   @update:value="pageRef.loadData()"></jb-switch>
                    </template>
                </jb-super-column>

                <jb-super-column title="操作" width="140" fixed="right">
                    <template #default="{ row }">
                        <jb-btn class="mx-8px" tip-text="编辑" secondary circle type="warning" :icon="Icons.EDIT"
                                @click="pageRef.showEditModal('编辑AI应用',{id:row.id})"
                        ></jb-btn>
                        <jb-btn class="mx-8px" tip-text="删除应用" secondary circle type="error" :icon="Icons.DELETE"
                                :confirmText="'确认删除该应用？'" :url="`/aiApp/del/${row.id}`" @success="pageRef.loadData()"
                        ></jb-btn>
                    </template>
                </jb-super-column>
            </jb-super-table>
        </template>
    </jb-crud-page>
</template>

<script setup>
import {ref} from 'vue'
import AppEdit from './cpns/app-edit.vue'
import AppTools from './cpns/app-tools/index.vue'
import ParamManagement from './cpns/app-tools/cpns/function/cnps/index.vue'
import {useResetableData} from '@/hooks/common/use-resetable-data'
import {Icons} from '@/constants'
import {useRouter} from "vue-router";
import {tabStore} from '../../stores/tabStore.js';

const router = useRouter();

const pageRef = ref(null)
const pageConditions = useResetableData({
    keywords: '',
    enable: null
})


function handleDrawerYesClick({componentRef, close}) {
    componentRef.submit(() => {
        close()
        pageRef.value.loadData()
    })
}

function onDrawerMaskClick({close})  {
    //关闭弹窗
    console.debug('onDrawerMaskClick')
    close();
}


function goChainPage(row) {
    const menuItem = {
        label: `${row.name}-编排`,
        key: `/app/design/${row.id}`
    };

    tabStore.addTab(menuItem);
    router.push(menuItem.key);

}
</script>

<style scoped>
.page-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.content-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.fixed-header {
    padding: 16px;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.table-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px;
}

.fixed-footer {
    padding: 16px;
    background-color: #fff;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

.ml-2 {
    margin-left: 8px;
}

.appType {
    display: flex;
    align-items: center;
    width: 100%;
}

</style>
